<template>
	<!-- 分销码界面 -->
	<view class="DistributionYards">
		<view class="img_center" style="">
			<!-- height: 466rpx; -->
			<view class="" style="position: relative;">
				<view class="img_center_top" style="width: 100%;height: 466rpx;position: relative; ">
					<view class="" style="position: absolute;width: 100%;">
						<view class="d-flex-yCenter-ju" style="padding: 90rpx  0rpx 32rpx;">
							{{uname}}的付款码
						</view>
						<view class="d-flex-yCenter-ju">
							<image :src="imgurl" mode="" style="width: 334rpx;height: 334rpx;margin-top: -14px;">
							</image>
						</view>
					</view>
				</view>
				<view class="img_center_bottom d-flex-yCenter jfy-center"
					style="height: 288rpx;position: relative;margin-top: -4rpx; ">
					<view class="d-flex-yCenter" style="padding: 50rpx; position: absolute;width: 100%;">
						<image src="../static/yue.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
						<view class="d-flex-yCenter-sb flex-grow1 ml-30">
							<view class="d-flex-yCenter-ju" style="color: #999999; ">
								余额支付
							</view>
							<navigator class="d-flex-yCenter" url='/goodsPackage/Recharge/Recharge' hover-class="none">
								<text class="font-30 mr-20" style="color: #FF890B;">￥{{userinfo.money}}</text>
								<u-icon name="arrow-right" color="#000" size="34"></u-icon>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex-yCenter-ju" style="margin-top: 122rpx;">
			<!-- <view class="" style="margin-right: 124rpx;">
				<view class="d-flex-yCenter-ju">
					<image src="../../static/icon/wechart.png" style="width: 52rpx;height: 42rpx;" mode=""></image>
				</view>
				<view class="d-flex-yCenter-ju"style="color: #FFFFFF;font-size: 12px;margin-top: 20rpx;">
					分享至微信
				</view>
			</view> -->
			<view class="" @tap='$tool.xiazai(imgurl)'>
				<view class="d-flex-yCenter-ju">
					<image src="../../static/icon/erweima_slices.png" style="width: 52rpx;height: 42rpx;" mode="">
					</image>
				</view>
				<view class="d-flex-yCenter-ju" style="color: #FFFFFF;font-size: 12px;margin-top: 20rpx;">
					保存二维码
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	// 佣金统计
	import {
		paymentcode
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				imgurl: ''
			}
		},
		computed: {
			...mapGetters(['userinfo', 'uname'])
		},
		onLoad() {
			this.paymentcodes();
		},
		methods: {
			// 获取付款码
			paymentcodes() {
				paymentcode().then(res => {
					console.log(res, '获取付款码')
					this.imgurl = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.DistributionYards {
		overflow: hidden;
		box-sizing: border-box;
		height: 100vh;
		background-color: #FF890B;

		.img_center {
			position: relative;
			margin: 90rpx 44rpx 0rpx;
			// border: 1px solid red;

			.img_center_top {
				overflow: hidden;
				background: url(../../static/icon/tuceng_ff_top.png);
				background-size: 100%;

				.wex_img {
					width: 334rpx;
					height: 334rpx;
					background-color: #000000;
				}
			}

			.img_center_bottom {
				overflow: hidden;
				background: url(../../static/icon/tuceng_ff_bottom.png);
				background-size: 100%;
			}

		}

		// image {
		// 	width: 100%;
		// 	height: 100%
		// }

	}
</style>
